<template>
  <div class="tag-cloud">
    <div class="header">
      <span class="title">标签云</span>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loader"></div>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-state">
      {{ error }}
      <button @click="selectCategoryList">重试</button>
    </div>

    <!-- 标签列表 -->
    <div v-else class="tags-container">
      <router-link
        v-for="(item, index) in categoryList"
        :key="item.id"
        :to="`/category/${item.slug}?id=${item.id}`"
        :title="item.name"
        class="tag-item"
        :style="getTagStyle(index)"
      >
        {{ item.name }}
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { selectCategory } from '@/api/category';
import type { Category } from '@/api/category/types.ts';
import Message from '@/components/message';

const categoryList = ref<Category[]>([]);
const loading = ref(true);
const error = ref<string | null>(null);

const selectCategoryList = async () => {
  try {
    loading.value = true;
    error.value = null;
    const result = await selectCategory();
    categoryList.value = result.data;
  } catch (err) {
    error.value = '获取标签列表失败';
    Message.error('获取标签列表失败');
    console.error('Failed to load categories:', err);
  } finally {
    loading.value = false;
  }
};

// 标签颜色配置
// 优化标签颜色配置
const tagColors = [
  { bg: 'linear-gradient(135deg, #ff6b6b, #ee5253)', hover: '#ff5252' },
  { bg: 'linear-gradient(135deg, #4ecdc4, #45b7af)', hover: '#45b7af' },
  { bg: 'linear-gradient(135deg, #ffd93d, #f6c90e)', hover: '#f7c516' },
  { bg: 'linear-gradient(135deg, #45aaf2, #2d98da)', hover: '#2d9cdb' },
  { bg: 'linear-gradient(135deg, #a55eea, #8854d0)', hover: '#8854d0' },
  { bg: 'linear-gradient(135deg, #26de81, #20c997)', hover: '#20c997' },
  { bg: 'linear-gradient(135deg, #fd9644, #fa8231)', hover: '#fa8231' },
  { bg: 'linear-gradient(135deg, #778ca3, #4b6584)', hover: '#6c7a89' },
];

// 获取标签样式
const getTagStyle = (index: number) => {
  const color = tagColors[index % tagColors.length];
  return {
    '--tag-bg': color.bg,
    '--tag-hover': color.hover,
  };
};

onMounted(selectCategoryList);
</script>

<style scoped lang="less">
.tag-cloud {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;

  .header {
    margin-bottom: 12px;

    .title {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a1a;
      position: relative;
      padding-left: 10px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 14px;
        background: #60a5fa;
        border-radius: 2px;
      }
    }
  }

  .loading-state {
    text-align: center;
    padding: 20px 0;

    .loader {
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #ff6b6b;
      border-radius: 50%;
      margin: 0 auto;
      animation: spin 0.8s linear infinite;
    }
  }

  .error-state {
    text-align: center;
    color: #ff4d4f;
    padding: 16px 0;
    font-size: 13px;

    button {
      margin-left: 8px;
      padding: 4px 12px;
      border: 1px solid currentColor;
      border-radius: 4px;
      background: transparent;
      color: inherit;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #ff4d4f;
        color: #fff;
      }
    }
  }

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;

    .tag-item {
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      color: #fff;
      background: var(--tag-bg);
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(100%);
        transition: transform 0.2s ease;
      }

      &:hover {
        transform: translateY(-2px);
        background: var(--tag-hover);

        &::before {
          transform: translateY(0);
        }
      }
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
